<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <div class="welcome-header">
          <h1>AI编程助手管理系统</h1>
          <p class="system-desc">智能化编程辅助平台 - 管理控制中心</p>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="panel-group">
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <el-icon><User /></el-icon>
              <span>用户统计</span>
            </div>
          </template>
          <div class="card-body">
            <h3>1,234</h3>
            <p>总用户数</p>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <el-icon><ChatDotRound /></el-icon>
              <span>对话数</span>
            </div>
          </template>
          <div class="card-body">
            <h3>45,678</h3>
            <p>总对话次数</p>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <el-icon><Timer /></el-icon>
              <span>响应时间</span>
            </div>
          </template>
          <div class="card-body">
            <h3>0.8s</h3>
            <p>平均响应时间</p>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <el-icon><DataLine /></el-icon>
              <span>系统负载</span>
            </div>
          </template>
          <div class="card-body">
            <h3>65%</h3>
            <p>当前系统负载</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="24" :lg="12">
        <el-card class="system-info">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <div class="info-item">
            <span class="label">系统版本：</span>
            <span class="value">v{{ version }}</span>
          </div>
          <div class="info-item">
            <span class="label">运行状态：</span>
            <el-tag type="success">正常运行中</el-tag>
          </div>
          <div class="info-item">
            <span class="label">更新时间：</span>
            <span class="value">2024-03-21 10:00:00</span>
          </div>
          <div class="action-buttons">
            <el-button type="primary" @click="goTarget('localhost:8080/demo/hello')">
              访问前台页面
            </el-button>
            <el-button type="success" @click="checkSystemStatus">
              检查系统状态
            </el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="24" :lg="12">
        <el-card class="quick-actions">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="action-grid">
            <el-button type="primary" plain icon="Setting">系统设置</el-button>
            <el-button type="warning" plain icon="User">用户管理</el-button>
            <el-button type="info" plain icon="Document">日志查看</el-button>
            <el-button type="success" plain icon="DataAnalysis">数据分析</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref } from 'vue'
import { User, ChatDotRound, Timer, DataLine } from '@element-plus/icons-vue'

const version = ref('1.0.0')

function goTarget(url) {
  window.open(url, '__blank')
}

function checkSystemStatus() {
  // 实现系统状态检查逻辑
  ElMessage.success('系统运行正常')
}
</script>

<style scoped lang="scss">
.home {
  padding: 20px;

  .welcome-header {
    text-align: center;
    margin-bottom: 30px;
    
    h1 {
      font-size: 28px;
      color: #303133;
      margin-bottom: 10px;
    }

    .system-desc {
      color: #909399;
      font-size: 16px;
    }
  }

  .panel-group {
    margin-bottom: 20px;
  }

  .dashboard-card {
    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .el-icon {
        font-size: 20px;
      }
    }

    .card-body {
      text-align: center;
      
      h3 {
        font-size: 24px;
        color: #303133;
        margin: 10px 0;
      }

      p {
        color: #909399;
        margin: 0;
      }
    }
  }

  .system-info {
    .info-item {
      margin-bottom: 15px;
      
      .label {
        font-weight: bold;
        margin-right: 10px;
      }
    }

    .action-buttons {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }
  }

  .quick-actions {
    .action-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
  }
}
</style>